<template>
  <a-form
    id="components-form-demo-normal-login"
    :form="form"
    class="login-form"
    @submit="handleSubmit"
  >
    <a-form-item>
      <a-input v-decorator="formData.username" placeholder="用户名">
        <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input
        v-decorator="formData.password"
        type="password"
        placeholder="密码"
      >
        <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-checkbox v-decorator="formData.remember">
        记住登陆
      </a-checkbox>
      <a class="login-form-forgot" href="">
        忘记密码
      </a>
      <a-button type="primary" html-type="submit" class="login-form-button">
        登 陆
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { login } from "@/api/auth";
export default {
  data() {
    return {
      formData: {
        username: [
          "username",
          {
            rules: [{ required: true, message: "请输入用户名!" }],
            initialValue: "seller_1"
          }
        ],
        password: [
          "password",
          {
            rules: [{ required: true, message: "请输入密码!" }],
            initialValue: 111111
          }
        ],
        remember: [
          "remember",
          {
            valuePropName: "checked",
            initialValue: true
          }
        ]
      }
    };
  },
  created() {
    this.form = this.$form.createForm(this);
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          login(values).then(res => {
            if (res.code === 1) {
              this.$router.replace("/index");
            }
          });
        }
      });
    }
  }
};
</script>
<style>
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>
